<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>CyberMall</title>

</head>
<body>

    <h1>用户注册</h1>
    <form action="${pageContext.request.contextPath}/reg.do" method="post">
        <p>
            <input type="text" name="username" id="username" />
            <span id="msg"></span>
        </p>
        <p><input type="password" name="password" /></p>
        <p><input type="tel" name="tel" /></p>
        <p><input type="submit" value="注册" /></p>
    </form>

<script type="text/javascript" src="static/js/jquery-3.3.1.js"></script>
<script type="text/javascript">

    $(function(){
        $("#username").blur(function(){
            //AJAX检查用户名是否存在
            var url = "${pageContext.request.contextPath}/checku.do";
            var params = {
                "uname" : $(this).val()
            };
            $.getJSON(url, params, function(data){
                if(!data.success){
                    $("#msg").text(data.msg).css("color", "red");
                }else{
                    $("#msg").text("√").css("color", "green");
                }
            });
        });
    });

</script>

</body>
</html>
